<template>
  <view class="w-100 ov-hd circle32 show0" v-if="goods_recommend.length">
    <view class="w-100 h78 bg-white">
      <view
        class="w-100 h-100 bg-theme f-y-c font24 font500 t-20 pl-2 radius-32-botton"
        >为您精选以下商品推荐加购</view
      >
    </view>
    <view class="w-100 bg-theme">
      <view class="w-100 bg-white radius-32-right px-3 py-1">
        <view
          class="h364 ov-hd"
          :class="show ? 'hauto' : goods_recommend.length > 2 ? 'h364' : ''"
        >
          <view
            class="w-100 py-2 f-b-c ty-li"
            v-for="(item, index) in goods_recommend"
            :key="item.id"
          >
            <view class="f-y-s">
              <ImageFile :url="item.thumbnail" className="w142 h142 circle12" />
              <view class="pl-3 w340 fs-b-b h142">
                <view class="font25 mt-1 t-20 font700 w-100">{{
                  item.name
                }}</view>
                <!-- <view class="font20 t-8 font400">汁汁双层嫩牛肉堡x1、百事(中)x1、冬阴功风味鸡翅x1</view> -->
                <view class="font22 t-20 font500 mt-1 w-100"
                  >￥{{ item.price }}
                  <!-- <text class="font18 re ml-1 t-8 font400 t-del">￥160</text> -->
                </view>
              </view>
            </view>
            <view
              class="w40 h40 font40 font600 rounded-circle t-20 f-c-c bg-theme re"
              @click="set_recommend(item, index)"
            >
              <image
                src="../static/icon_select_cur.png"
                class="w40 h40"
                v-if="item.state"
              />
              <view
                class="w36 h36 rounded-circle bg-white ab z-99 top2 left2"
                v-else
              ></view>
            </view>
          </view>
        </view>
        <view
          class="f-c-c py-2"
          @click="set_show"
          v-if="goods_recommend.length > 2"
        >
          <text class="font22 t-8 font400">全部优惠</text>
          <image
            src="../static/icon_right.png"
            :class="show ? 'ty-all-down' : 'ty-all'"
            class="w22 h22 re ml-1"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ImageFile from "./img_file.vue";

import { goodsRecommend } from "../api/shop.js";
import { get_coupon_charge } from "../api/coupon.js";
const coupon_name = {
  TICKET: "票务",
  ACTIVITY: "活动",
  YEAR_CARD: "年卡",
  MALL: "商城",
  FOOD: "餐饮",
  // MAP:'地图',
  LINE: "路线",
  WORKSHOP: "工坊",
};
export default {
  components: {
    ImageFile,
  },
  props: {
    goodsType: {
      default: "",
    },
  },
  data() {
    return {
      show: false,
      goods_recommend: [],
    };
  },
  created() {
    this.get_coupon_list();
  },
  methods: {
    set_show() {
      this.show = !this.show;
    },
    get_coupon_list() {
      if (!this.goodsType) {
        this.goods_recommend = [];
        return;
      }
      let data = {
        chargeType: "CHARGE",
        currentPage: 1,
        expired: false,
        orderType: this.goodsType[0],
        pageSize: 100,
      };
      get_coupon_charge(data).then((res) => {
        if (res.code == 0) {
          res.body.records?.map((item) => {
            item.name = `【优惠券】` + item.name;
            item.id = item.id;
            item.price = item.price;
            item.number = 1;
            item.state = false;
          });
          this.goods_recommend = res.body.records;
          this.get_goodsRecommend();
        }
      });
    },
    // 推荐商品 加购
    async get_goodsRecommend() {
      let data = {
        goodsTypeList: this.goodsType + "", //推荐类型,可用值:TICKET,ACTIVITY,YEAR_CARD,MALL,FOOD,MAP,LINE
      };
      const {
        body: { records },
      } = await goodsRecommend(data);
      records?.map((item) => {
        item.name = item.goodsName;
        item.id = item.goodsId;
        item.price = item.goodsFee;
        item.number = 1;
        item.state = false;
      });
      this.goods_recommend = [...this.goods_recommend, ...records] || [];
    },
    set_recommend(item, index) {
      if (!this.$validateStock(item, 1)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      this.goods_recommend[index].state = !this.goods_recommend[index].state;
      this.$emit("get_recommend", { ...item });
    },
  },
};
</script>

<style scoped lang="scss">
.ty-all {
  transform: rotate(90deg);
  transition: all 0.3s;
}
.ty-all-down {
  transform: rotate(270deg);
  transition: all 0.3s;
}
.hauto {
  height: auto !important;
  transition: all 0.3s;
}
</style>
